<template>
  <div class="index-box" ref="index">
    <div class="table">
        <el-table
        	:data="listData"
        	:stripe="true"
        	row-key="code"
        	:tree-props="{children: 'children', hasChildren: 'code'}"
        	border
        	:height="tableHeight"
        	lazy
        	:load="loadChildren"
        	v-loading="listLoading">
        	<el-table-column prop="index"  width="120"></el-table-column>
        	<el-table-column label="所属区域" align="center" width="100">
        		<template slot-scope="scope">
        			{{ regions[scope.row.region] }}
        		</template>
        	</el-table-column>
        	<el-table-column prop="code" label="地区编码" width="180"></el-table-column>
        	<el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope" >
              <div class="activeBox">
                <el-button
                  v-if="scope.row.level=='1'"
                  size="medium"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)"
                  v-has="'system:region:reg'"
                >修改所属区域</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
    </div>
		<!--	新增、修改	-->
		<el-dialog :title="formDialogTitle" :visible.sync="formDialogVisible" width="620px"   v-dialogDrag :close-on-click-modal="false">
			<el-form  :model="formData" ref="formData" :rules="formRules" class="dialogForm">
				<el-form-item  prop="regionId" style="margin: 0px;">
            <el-radio-group v-model="formData.regionId">
					    <el-radio :label="index" v-if="index!='0'" v-for="(item,index) in regions">{{item}}</el-radio>
					  </el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="formDialogVisible = false" size="mini">取 消</el-button>
				<el-button :loading="formLoading" type="primary"  size="mini" @click="saveForm">确 定</el-button>
			</div>
		</el-dialog>
		<!--	新增、修改	-->
  </div>
</template>

<script>
  import {getRegionList,setRegion} from '@/api/getData';
  import qs from 'qs';
	export default {
		name: 'catalog_area_index',
		data() {
			return {

				/*		筛选数据		*/
				searchForm: {
					pcode : "0"
				},
        tableHeight:0,
				/*		筛选数据		*/

				/*		表格数据及相关		*/
				listLoading: false,
				listData: [],
				/*		表格数据及相关		*/

				regions: ["-", "东北", "华东", "华北", "华中", "华南", "西南", "西北"],

				/*		新增、修改		*/
				formDialogVisible: false,
				formLoading: false,
				formDialogTitle: "",
				formData: {
          provinceId:'',
          regionId:''
        },
				formRules: {
					regionId: [
						{
							required: true,
							message: '请选择所属地区',
							trigger: 'blur'
						}
					],
				},
				/*		新增、修改		*/

			}
		},
		activated() {

		},
		mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight-40;
      })
		},
		methods: {

			/*		加载列表数据		*/
      async dataInfo() {
      	try {
      		this.listLoading = true;
      		const result = await getRegionList(this.searchForm);
      		if (result.code == 200) {
      			this.listData = result.data;
      		} else {
      			this.$message.error(result.message);
      		}
      		this.listLoading = false;
      	} catch (err) {
      		this.listLoading = false;
      		console.log(err)
      	}
      },
			loadChildren(tree, treeNode, resolve) {
        getRegionList({pcode: tree.code}).then ((res) => {
					this.listLoading = false
					if (res.code == 200) {
						resolve(res.data)
					} else {
						this.$message.error(res.msg)
					}
				})

			},

			/*修改区域*/
			handleEdit(index,row) {
				this.formDialogVisible = true
				this.formDialogTitle = `修改${row.name}所属区域`;
				this.formData = {
				  provinceId: row.code,
				  regionId:row.region
				}
			},

			saveForm() {
				var formData = this.$refs.formData;
				formData.validate((valid) => {
					if (valid) {
						this.formLoading = true;
						setRegion(this.formData).then ((res) => {
							this.formLoading = false;
							if (res.code == 200) {
								this.$message.success('操作成功，数据已成功保存');
								this.formDialogVisible = false;
                this.dataInfo();
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				})
			},
		}
	}
</script>
<style scoped>
  .dialogForm .el-radio{margin-bottom: 10px;}
  .index-box /deep/ .el-icon-arrow-right{
      font-size: 16px;
      font-weight: bold;
  }
</style>
